<template>
  <div class="container">
    <div class="tabs">
      <div
        :class="`tab ${ currentIdx === i ? 'active' : '' }`"
        v-for="(item, i) in list"
        :key="i"
        @click="onTabChange(i)"
      >
        {{ item.title }}
      </div>
    </div>
    <div class="content">
      <!-- {{ list[currentIdx].content }} -->
      <component :is="list[currentIdx].component" />
    </div>
  </div>
</template>

<script>
import Todolist from './todolist.vue';
import Collapse from './collapse手风琴.vue';
import BuyBooks from './买书.vue';

export default {
  components: {
    Todolist,
    Collapse,
    BuyBooks,
  },
  data () {
    return {
      currentIdx: 0,
      list: [
        {
          title: 'todolist',
          component: 'Todolist',
        },
        {
          title: '折叠面板',
          component: 'Collapse',
        },
        {
          title: '买书',
          component: 'BuyBooks',
        },
      ],
    };
  },
  methods: {
    onTabChange (i) {
      this.currentIdx = i;
    },
  },
}
</script>

<style scoped>
  .tab {
    display: inline-block;
    padding: 4px 8px;
  }
  .tab.active {
    color: red;
  }
  .content {
    outline: 1px solid red;
  }
</style>